<template>
	<div class="abs-page">
		<Head navTitle="分析师详情"/>
		<div class="page-container ">
			<div class="analyst-m-lg" >
				<div class="analyst-cell flex-center">
					<div class="m-avatar">
						<img src="../../assets/images/fenxishi.png">
					</div>
					<div class="flex_bd">
						<div class="item-row">
							<div class="item-label ">金牌分析师 Craig</div>
						</div>
						<div class="item-row flex-center">
							<span class="text-yellow">Craig</span>
							<div class="m-rank-icon"><img src="../../assets/images/rank-icon.png"></div>
						</div>
					</div>
					<el-button round size="small" type="warning">包赔跟投</el-button>
				</div>
				<div class="anal-info">
					<div class="anal-cell">
						<div class="a-label">足彩分析师</div>
						<div class="a-val">新东方集团培训师：越南新东方足彩管理部总监</div>
					</div>
					<div class="anal-cell">
						<div class="a-label">教育背景</div>
						<div class="a-val">自2019年6月起任富国瑞泽回报混合型证券投资基金经理。具有基金从业资格。</div>
					</div>
				</div>
			</div>
			<!-- list -->
			<div class="m-wrapper">
				<div class="analy-res-panel" v-for="(item,index) in gLists" :key="index">
					<div class="analy-res-body">
						<div class="analy-heading flex-center flex-zBetween">
							<div class="analy-tag">包赔赛事</div>
							<div class="vs-title">奥运男足</div>
							<div class="analy-less">余额：9000</div>
						</div>
						<div class="game-vs">
							<div class="vs-flex flex-center flex-hc">
								<div class="vs-title">神户胜利船shenghushenglichuan</div>
								<div class="vs-card_bd">
									<div class="vs-value">反波胆 <span class="score">0-1</span></div>
									<div class="vs-time">2021 04-21 04:00</div>
								</div>
								<div class="vs-title">德岛漩涡dedaoxuanwo</div>
							</div>
						</div>
					</div>
					<div class="analy-footer ">
						<div class="analy-select-bar ">
							<div class="analy-select-btns flex-center">
								<div class="flex_bd">
									<el-radio-group v-model="item.radioPrice" >
										<el-radio v-for="(item,index) in item.selectPrice" :label="item" :key="index" border>{{item.text}}</el-radio>
									</el-radio-group>
								</div>
								<div class="set-icon" @click="valVis(index)"><span class="iconfont icon-shezhi"></span></div>
							</div>
							<div class="select-action-box flex-center">
								<el-input @input="gameInput($event,index)" v-model="item.diyValue" placeholder="自定义"></el-input>
								<el-button  type="warning">包赔跟投</el-button>
							</div>
						</div>
						<div class="text-tip">注：包赔投注如果投中，两个工作日退还本金</div>
					</div>
				</div>
			</div>
		</div>
		<van-popup v-model="valVisible" position="bottom" round  closeable>
			<div class="pop-m-title">设置跟投金额</div>
			<div class="bs-val-form">
				<el-form ref="form" :model="form" label-position="top">
					<el-form-item label="第一 设定值diyishedingzhi：">
						<el-input v-model="form.value1" placeholder="请输入"></el-input>
					</el-form-item>
					<el-form-item label="第二 设定值diershedingzhi：">
						<el-input v-model="form.value2" placeholder="请输入"></el-input>
					</el-form-item>
					<el-form-item label="第二 设定值diershedingzhi：">
						<el-input v-model="form.value3" placeholder="请输入"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div class="dialog-lg-footer " style="padding: 20px 30px;">
				<el-button type="success" @click="valComfirm">确 定</el-button>
				<el-button type="info" @click="valVisible = false">取 消</el-button>
			</div>
		</van-popup>
	</div>
</template>

<script>
	// @ is an alias to /src
	import { Toast } from 'vant';
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {
				gLists:[{
					radioPrice:'',
					diyValue:'',
					selectPrice: [{
							"value": 100,
							"text": "100"
						},
						{
							"value": 500,
							"text": "500",
						},
						{
							"value": 900,
							"text": "900"
						}
					]
				},{
					radioPrice:'',
					diyValue:'',
					selectPrice: [{
							"value": 100,
							"text": "100"
						},
						{
							"value": 500,
							"text": "500",
						},
						{
							"value": 900,
							"text": "900"
						}
					]
				},{
					radioPrice:'',
					diyValue:'',
					selectPrice: [{
							"value": 100,
							"text": "100"
						},
						{
							"value": 500,
							"text": "500",
						},
						{
							"value": 900,
							"text": "900"
						}
					]
				}],
				form: {
					value1: '',
					value2: '',
					value3: '',
				},
				valVisible:false,
				listindex:0
			};
		},
		methods: {
			
			gameInput(e,index){
				console.log('input:',e);
				console.log('1:',index);
				this.gLists[index].radioPrice = -9   // 827
			},
			valVis(e){
				this.listindex = e
				this.valVisible = true
			},
			valComfirm(){
				if(this.form.value1 == ''){
					Toast('请输入第一 设定值diyishedingzhi')
					return false
				}
				if(this.form.value2 == ''){
					Toast('请输入第二 设定值diyishedingzhi')
					return false
				}
				if(this.form.value3 == ''){
					Toast('请输入第三 设定值diyishedingzhi')
					return false
				}
				this.gLists[this.listindex].selectPrice[0].value = this.form.value1
				this.gLists[this.listindex].selectPrice[0].text = this.form.value1
				this.gLists[this.listindex].selectPrice[1].value = this.form.value2
				this.gLists[this.listindex].selectPrice[1].text = this.form.value2
				this.gLists[this.listindex].selectPrice[2].value = this.form.value3
				this.gLists[this.listindex].selectPrice[2].text = this.form.value3
				this.valVisible = false
			}
		}
	}
</script>
